<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src="./echarts.min.4.9.js"></script>
		  <style type="text/css">
		  	#chart_div{
				width: 100%;
				height: 500px;
			}
		  </style>
		<title></title>
	</head>
	<body>
		<div id="chart_div"></div>
		<script type="text/javascript">
		  
		  Date.prototype.FormatTime = function (fmt) {
		      let o = {
		          "M+": this.getMonth() + 1, //月份
		          "d+": this.getDate(), //日
		          "H+": this.getHours(), //小时
		          "m+": this.getMinutes(), //分
		          "s+": this.getSeconds(), //秒
		          "q+": Math.floor((this.getMonth() + 3) / 3), //季度
		          "S": this.getMilliseconds() //毫秒
		      };
		      console.log("-----o-------",o)
		      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		      for (let k in o)
		          if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		      return fmt;
		  };
		  function init(){
			  let chart = echartsNew.init(document.getElementById("chart_div"));
			  
			  let option = {
			          title: {
			              text: '',
			              x: 'center'
			          },
			          tooltip: {
			              trigger: 'axis',
			              axisPointer: {
			                  // 座标轴指示器，座标轴触发有效
			                  type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			              },
			              extraCssText: '',
			              formatter: function(params) {
			                  console.log("params",params)
			                  let relVal = params[0].axisValueLabel;
			                  const getDateStr = (hideBar, dataBar) => {
			                      console.log("hideBar",hideBar)
			                      console.log("dataBar",dataBar)
			                      let str = '';
			 
			                      str +=
			                          new Date(new Date().getTime() + 86400000 * hideBar.value).FormatTime('yyyy-M-d') +
			                          ' 至 ' +
			                          new Date(new Date().getTime() + 86400000 * (hideBar.value + dataBar.value)).FormatTime('yyyy-M-d');
			                      console.log("str",str)
			                      return str;
			                  };
			                  relVal += '<br/>计划：' + getDateStr(params[0], params[1]) + '<br/>实际：' + getDateStr(params[2], params[3]);
			                  return relVal;
			                  // return "计划"
			              }
			          },
			          legend: {
			              data: ['计划任务', '实际任务'],
			              x: 30
			          },
			  
			          grid: {
			              left: '3%',
			              right: '3%',
			              bottom: '3%',
			              containLabel: true
			          },
			          yAxis: {
			              type: 'category',
			              splitLine: { show: false },
			              data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六']
			          },
			          xAxis: {
			              type: 'value',
			              boundaryGap: [0, 0.01],
			              axisLabel: {
			                  show: true,
			                  interval: 0,
			                  formatter: function(value) {
			                      return new Date(new Date().getTime() + 86400000 * value).FormatTime('MM-dd'); //86400000，一天的毫秒数
			                  }
			              }
			          },
			          series: [
			              {
			                  name: 'planDate',
			                  type: 'bar',
			                  stack: 'plan',
			                  barCategoryGap: '10%',
			                  itemStyle: {
			                      normal: {
			                          borderColor: 'rgba(0,0,0,0)',
			                          color: 'rgba(0,0,0,0)'
			                      },
			                      emphasis: {
			                          borderColor: 'rgba(0,0,0,0)',
			                          color: 'rgba(0,0,0,0)'
			                      }
			                  },
			                  data: [0, 160, 67, 112, 148, 179] //计划的起始位置
			              },
			              {
			                  name: '计划',
			                  type: 'bar',
			                  stack: 'plan',
			                  itemStyle: {
			                      normal: {
			                          label: {
			                              show: true,
			                              position: 'right',
			                              textStyle: {
			                                  fontSize: 14
			                              },
			                              formatter: function(obj) {
			                                  return obj.value + '天';
			                              }
			                          },
			                          color: '#c23531'
			                      }
			                  },
			                  data: [50, 50, 50, 50, 50, 50] //计划的数据内容
			              },
			              {
			                  name: 'factDate',
			                  type: 'bar',
			                  stack: 'fact',
			                  itemStyle: {
			                      normal: {
			                          borderColor: 'rgba(0,0,0,0)',
			                          color: 'rgba(0,0,0,0)'
			                      },
			                      emphasis: {
			                          borderColor: 'rgba(0,0,0,0)',
			                          color: 'rgba(0,0,0,0)'
			                      }
			                  },
			                  data: [0, 160, 67, 112, 148, 179] //实际进度的起始位置
			              },
			              {
			                  name: '实际',
			                  type: 'bar',
			                  stack: 'fact',
			                  itemStyle: {
			                      normal: {
			                          label: {
			                              show: true,
			                              position: 'right',
			                              textStyle: {
			                                  fontSize: 14
			                              },
			                              formatter: function(obj) {
			                                  return obj.value + '天';
			                              }
			                          },
			                          color: '#91c7ae'
			                      }
			                  },
			                  data: [33, 16, 60, 22, 58, 96] //实际进度行数据内容
			              },
			              {
			                  type: 'bar',
			                  stack: 'none',
			                  barWidth: '2',
			                  itemStyle: {
			                      normal: {
			                          borderColor: 'rgba(0,0,0,0)',
			                          color: 'rgba(0,0,0,0)'
			                      },
			                      emphasis: {
			                          borderColor: 'rgba(0,0,0,0)',
			                          color: 'rgba(0,0,0,0)'
			                      }
			                  },
			                  data: [0, 0, 0, 0, 0, 0]
			              }
			          ]
			      };
			  	chart.setOption(option);
		  }
		setTimeout(()=>{
			console.log("echarts",echartsNew)
			init();
		},2000)
		</script>
	</body>
</html>
